<template>
  <view class="buildings-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">建筑管理</text>
      <text class="page-subtitle">建造和管理你的基地</text>
    </view>
    
    <!-- 建筑统计 -->
    <view class="buildings-stats">
      <view class="stat-item">
        <text class="stat-number">{{ builtBuildings }}</text>
        <text class="stat-label">已建造</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ totalPopulation }}</text>
        <text class="stat-label">人口容量</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ totalProduction }}</text>
        <text class="stat-label">总产出</text>
      </view>
    </view>
    
    <!-- 建筑分类 -->
    <view class="category-tabs">
      <view 
        class="category-tab" 
        :class="{active: currentCategory === 'all'}"
        @click="setCategory('all')"
      >
        <text>全部</text>
      </view>
      <view 
        class="category-tab" 
        :class="{active: currentCategory === 'production'}"
        @click="setCategory('production')"
      >
        <text>生产</text>
      </view>
      <view 
        class="category-tab" 
        :class="{active: currentCategory === 'defense'}"
        @click="setCategory('defense')"
      >
        <text>防御</text>
      </view>
      <view 
        class="category-tab" 
        :class="{active: currentCategory === 'utility'}"
        @click="setCategory('utility')"
      >
        <text>功能</text>
      </view>
    </view>
    
    <!-- 建筑列表 -->
    <view class="buildings-grid">
      <view 
        class="building-card" 
        v-for="building in filteredBuildings" 
        :key="building.id"
        @click="selectBuilding(building)"
        :class="{built: building.built, selected: selectedBuilding === building.id}"
      >
        <view class="building-header">
          <text class="building-icon">{{ building.icon }}</text>
          <view class="building-info">
            <text class="building-name">{{ building.name }}</text>
            <text class="building-level" v-if="building.built">等级 {{ building.level }}</text>
          </view>
        </view>
        
        <text class="building-description">{{ building.description }}</text>
        
        <view class="building-stats">
          <view class="stat-row" v-if="building.production">
            <text class="stat-label">产出:</text>
            <text class="stat-value">{{ building.production }}</text>
          </view>
          <view class="stat-row" v-if="building.cost">
            <text class="stat-label">消耗:</text>
            <text class="stat-value">{{ building.cost }}</text>
          </view>
        </view>
        
        <view class="building-actions">
          <button 
            v-if="!building.built" 
            class="build-btn" 
            @click.stop="buildBuilding(building)"
            :disabled="!canBuild(building)"
          >
            建造
          </button>
          <button 
            v-if="building.built" 
            class="upgrade-btn" 
            @click.stop="upgradeBuilding(building)"
            :disabled="!canUpgrade(building)"
          >
            升级
          </button>
        </view>
      </view>
    </view>
    
    <!-- 建筑详情 -->
    <view class="building-details" v-if="selectedBuildingInfo">
      <view class="detail-header">
        <text class="detail-icon">{{ selectedBuildingInfo.icon }}</text>
        <view class="detail-info">
          <text class="detail-name">{{ selectedBuildingInfo.name }}</text>
          <text class="detail-level" v-if="selectedBuildingInfo.built">
            等级 {{ selectedBuildingInfo.level }}
          </text>
        </view>
      </view>
      <view class="detail-content">
        <text class="detail-description">{{ selectedBuildingInfo.description }}</text>
        <view class="detail-requirements">
          <text class="requirements-title">建造需求:</text>
          <view class="requirement-item" v-for="req in selectedBuildingInfo.requirements" :key="req.type">
            <text class="requirement-type">{{ req.type }}:</text>
            <text class="requirement-amount">{{ req.amount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BuildingsPage',
  props: {
    buildings: {
      type: Array,
      default: () => []
    },
    currentCategory: {
      type: String,
      default: 'all'
    },
    selectedBuilding: {
      type: String,
      default: null
    },
    selectedBuildingInfo: {
      type: Object,
      default: null
    }
  },
  
  computed: {
    filteredBuildings() {
      if (this.currentCategory === 'all') {
        return this.buildings
      }
      return this.buildings.filter(building => building.category === this.currentCategory)
    },
    
    builtBuildings() {
      return this.buildings.filter(building => building.built).length
    },
    
    totalPopulation() {
      return this.buildings.reduce((total, building) => {
        return building.built ? total + (building.population || 0) : total
      }, 0)
    },
    
    totalProduction() {
      return this.buildings.reduce((total, building) => {
        return building.built ? total + (building.productionValue || 0) : total
      }, 0)
    }
  },
  
  methods: {
    setCategory(category) {
      this.$emit('set-category', category)
    },
    
    selectBuilding(building) {
      this.$emit('select-building', building)
    },
    
    canBuild(building) {
      // 检查是否有足够的资源建造
      return true // 简化版本
    },
    
    buildBuilding(building) {
      this.$emit('build-building', building)
    },
    
    canUpgrade(building) {
      return building.built && building.level < 3
    },
    
    upgradeBuilding(building) {
      this.$emit('upgrade-building', building)
    }
  }
}
</script>

<style scoped>
.buildings-page {
  padding: 20rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.buildings-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  background: white;
  padding: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
}

.stat-label {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-top: 8rpx;
}

.category-tabs {
  display: flex;
  margin-bottom: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.category-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.category-tab.active {
  background: #667eea;
  color: white;
}

.buildings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.building-card {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.building-card.selected {
  border: 2rpx solid #667eea;
}

.building-card.built {
  background: #f8f9fa;
}

.building-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.building-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.building-info {
  flex: 1;
}

.building-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.building-level {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-top: 4rpx;
}

.building-description {
  font-size: 22rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.building-stats {
  margin-bottom: 16rpx;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 20rpx;
  color: #666;
}

.stat-value {
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
}

.building-actions {
  display: flex;
  gap: 12rpx;
}

.build-btn, .upgrade-btn {
  flex: 1;
  padding: 12rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 22rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.build-btn {
  background: #27ae60;
  color: white;
}

.build-btn:disabled {
  background: #bdc3c7;
  color: #7f8c8d;
}

.upgrade-btn {
  background: #3498db;
  color: white;
}

.upgrade-btn:disabled {
  background: #bdc3c7;
  color: #7f8c8d;
}

.building-details {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.detail-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.detail-info {
  flex: 1;
}

.detail-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.detail-level {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-top: 4rpx;
}

.detail-content {
  margin-top: 16rpx;
}

.detail-description {
  font-size: 22rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.detail-requirements {
  margin-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 16rpx;
}

.requirements-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.requirement-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.requirement-type {
  font-size: 20rpx;
  color: #666;
}

.requirement-amount {
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
}
</style>
